<template>
	<view class="data-container">
		<view class="bj">
			<image src="https://wx.2024csnl.com/static/u0425/u0245-bj.jpg" alt="" mode="widthFix"></image>
		</view>
		<view class="inner">
			<view class="fuli-box">
				<view class="fuli-box__thead">
					<view class="title">
						<span>今日福利</span>
					</view>
				</view>
				<view class="fuli-box__tbody">
					<view class="flex">
						<view class="img">
							<image src="https://wx.2024csnl.com/static/u0425/u0245-1.png" alt="" mode="heightFix"></image>
						</view>
						<view class="data">
							<span>{{today_fh}}</span>
							<text>贡献值用于领取福利与转赠，禁止买卖</text>
						</view>
					</view>
				</view>
			</view>
			<view class="shifang-box">
				<view class="shifang-box__thead">
					<view class="title">
						<span>今日释放</span>
					</view>
				</view>
				<view class="all_body">
					<view class="shifang-box__tbody">
						<view class="total">
							<span>{{today_gxz}}</span>
						</view>
						<view class="group">
							<view class="item">
								<h3>待 释 放</h3>
								<p>{{have_gxz}}</p>
							</view>
							<view class="item">
								<h3>已 释 放</h3>
								<p>{{had_gxz}}</p>
							</view>
						</view>
					</view>
					<view class="gongxian-box">
						<view class="thead">
							<view class="flex">
								<view class="lt">
									<span>我的贡献值</span>
								</view>
								<view class="lr">
									<span>估值</span>
								</view>
							</view>
						</view>
						<view class="tbody">
							<view class="flex">
								<view class="lt">
									<span>{{msg.option_num}}</span>
								</view>
								<view class="lr">
									<span>{{optionPrice}}</span>
								</view>
							</view>
						</view>
					</view>
					<view v-if="false" class="gongxian-box">
						<view class="thead">
							<view class="flex">
								<view class="lr">
									<span>冻结值</span>
								</view>
								<view class="lr">
									<span>解冻倒计时</span>
								</view>
							</view>
						</view>
						<view class="tbody">
							<view class="flex">
								<view class="lr">
									<span>{{frozenoption}}</span>
								</view>
								<view class="lr">
									<span>{{end_time_txt}}</span>
								</view>
							</view>
						</view>
					</view>
					<view class="shifang-box" v-if="is_new">
						<view class="shifang-box__tbody" style="padding-top: 0px; padding-bottom: 5px; margin-top: 0;">
							<button
								style="color: #ffffff; background-color: #ed6c00; width: 98%; font-size: 1rem; font-weight: bold; padding: 5px;"
								@click="numans">新人福利</button>
							<view class="tips" style="padding: 2px 0 0 0; margin-top: 0;">
								<span style="font-size: 12px;padding: 2px 0 0 0;">点击上方按钮进入新人福利</span>
							</view>
						</view>
					</view>
					<view class="details-box">
						<view class="details-box__thead">
						</view>
						<view class="details-box__tbody">
							<view class="thead">
								<view :class="navIndex == 0 ? `lt`: `lr`" @click="chooseItem(0, 0)">
									<view class="title">
										<span>贡献值明细</span>
									</view>
								</view>
								<view :class="navIndex == 1 ? `lt`: `lr`"
									@click="$toPage('/pages/holdshares/give-friends')">
									<view class="title">
										<span>转赠</span>
									</view>
								</view>
							</view>
							<view class="group">
								<view class="item" v-for="(item,index) in list" :key="index">
									<view class="lt">
										<span>{{ item.remark }}</span>
										<span style="color: #999;">{{ item.createtime}}</span>
									</view>
									<view class="lr">
										<span style="color: #FC2E30;">{{ item.nums }}</span>
									</view>
								</view>
								<view class="flex-center addressImgBox" v-if="list.length==0">
									<image src="https://wx.2024csnl.com/static/noData.png"></image>
									暂无数据~
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>

		</view>
	</view>
</template>

<script>
	import {
		positionsReleaseDetails
	} from "../../api/index.js"
	export default {
		data() {
			return {
				msg: {},
				data: [{
						tit: '贡献值明细',
						id: 0
					},
					{
						tit: '贡献值收入',
						id: 2
					},
					{
						tit: '榜单',
						id: 3
					},
					{
						tit: '贡献值支出',
						id: 1
					},
				],
				today_fh: 0,
				today_gxz: 0,
				have_gxz: 0,
				had_gxz: 0,
				end_time_txt: '',
				frozenoption: '',
				is_new: 0,
				navIndex: 0,
				navId: 0, //按钮id
				pagenum: 1,
				noMoreData: false,
				list: [],
			}
		},
		computed: {
			optionPrice() {
				if (this.msg && this.msg.optionprice) {
					return this.msg.optionprice.replace("估值", "").replace("元", "");
				}

				return "";
			}
		},
		onShow() {
			this.pagenum = 1
			this.getPositionsReleaseDetails()
			this.getGxzInfo()
		},
		onReachBottom() {
			this.pagenum += 1
			this.getPositionsReleaseDetails('bottom')
		},
		methods: {
			async getGxzInfo() {
				const res = await positionsReleaseDetails(`s=/ApiZwyRequest/getgxzinfo`)
				const {
					data,
					status,
					msg
				} = res.data
				this.today_fh = data.today_fh;
				this.today_gxz = data.today_gxz;
				this.have_gxz = data.have_gxz;
				this.had_gxz = data.had_gxz;
				this.end_time_txt = data.end_time_txt;
				this.is_new = data.is_new;
				this.frozenoption = data.frozenoption;
			},
			async getPositionsReleaseDetails(type) {
				const res = await positionsReleaseDetails(
					`s=/ApiZwyRequest/optionlogs&logtype=${this.navId}&pagenum=${this.pagenum}`)
				const {
					option_num,
					valuation,
					option_income,
					option_pay,
					option_change,
					optionprice,
					data,
					status,
					msg
				} = res.data
				// console.log(res, "帮", data)
				if (status == 1) {
					type == 'bottom' ? this.list.push(...data) : this.list = data
					this.msg = {
						option_num,
						valuation,
						option_income,
						option_pay,
						option_change,
						optionprice

					}
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			numans() {
				this.$toPage('/package/mine/numans')
			},
			transition() {
				console.log("fdsafdsafdsafdsa")
				this.$toPage('/package/mine/transition/transition?tabsActive=1&person=true')
			},
			chooseItem(i, id) {

				if (id == 3) {
					this.navIndex = 0;
					this.navId = this.data[0].id
					this.$toPage('/pages/holdshares/bangdan')

					return
				}


				this.navIndex = i;
				this.pagenum = 1

				this.navId = id

				uni.setStorageSync('sessionData', {
					session_id: '',
				})
				this.getPositionsReleaseDetails()
			},
		}
	}
</script>

<style lang="less" scoped>
	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.data-container {
		background: #bf0101;

		.bj {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 0;

			image {
				display: block;
				width: 100%;
			}
		}

		.inner {
			position: relative;
			padding: 20vw 20px 20px;
		}
	}

	.fuli-box {
		position: relative;
		margin: 0 0 10px;

		.fuli-box__thead {
			position: relative;
			margin: 0 0 -20px;
			z-index: 1;
			text-align: center;

			.title {
				position: relative;
				background: -webkit-linear-gradient(top, #ffc300, #ff8c00);
				display: inline-block;
				padding: 0 50px;
				border-radius: 0 0 15px 15px;

				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 0;
					width: 0;
					height: 0;
					border: 10px solid transparent;
					border-top-color: #ff6f00;
				}

				&::before {
					top: 5px;
					left: -10px;
					transform: rotate(-45deg);
				}

				&::after {
					top: 5px;
					right: -10px;
					transform: rotate(45deg);
				}

				span {
					position: relative;
					line-height: 35px;
					font-size: 18px;
					font-weight: bold;
					color: #c8161d;

				}
			}
		}

		.fuli-box__tbody {
			position: relative;
			background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 60%, #ffdab8 100%);
			border-radius: 20px;
			padding: 20px 0 0 0;

			&::before {
				content: '';
				position: absolute;
				left: 5px;
				top: 5px;
				bottom: 5px;
				right: 5px;
				z-index: 0;
				border-radius: 20px;
				border: 1px solid #ffbc77;
			}

			.flex {
				position: relative;
				display: flex;
				z-index: 1;

				.img {
					image {
						margin-left: 10px;
						display: block;
						width: 80px;
						height: 80px;
					}
				}

				.data {
					flex: 1;
					display: flex;
					flex-direction: column;
					text-align: center;
					padding: 10px 0 0;
					line-height: 40px;

					span {
						font-size: 40px;
						font-weight: bold;
						color: #ed6c00;
					}

					text {
						font-size: 12px;
						font-weight: bold;
						color: #333333;
					}
				}
			}
		}
	}

	.shifang-box {
		position: relative;
		margin: 0 0 10px;

		.shifang-box__thead {
			position: relative;
			margin: 0 0 -25px;
			z-index: 1;
			text-align: center;

			.title {
				position: relative;
				background: -webkit-linear-gradient(top, #ffc300, #ff8c00);
				display: inline-block;
				padding: 0 50px;
				border-radius: 0 0 15px 15px;

				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 0;
					width: 0;
					height: 0;
					border: 10px solid transparent;
					border-top-color: #ff6f00;
				}

				&::before {
					top: 5px;
					left: -10px;
					transform: rotate(-45deg);
				}

				&::after {
					top: 5px;
					right: -10px;
					transform: rotate(45deg);
				}

				span {
					position: relative;
					line-height: 35px;
					font-size: 18px;
					font-weight: bold;
					color: #c8161d;

				}
			}
		}

		.all_body {
			margin-top: 5px;
			border-radius: 10px;
			background-color: #ffffff;
		}

		.shifang-box__tbody {
			position: relative;
			border-radius: 20px;
			padding: 20px 0 0 0;

			&::before {
				content: '';
				position: absolute;
				left: 5px;
				top: 5px;
				bottom: 5px;
				right: 5px;
				z-index: 0;
				border-radius: 20px;
			}

			.total {
				position: relative;

				span {
					display: block;
					line-height: 50px;
					font-size: 24px;
					font-weight: bold;
					text-align: center;
					color: #ed6c00;
				}
			}

			.tips {
				position: relative;

				span {
					display: block;
					font-weight: bold;
					text-align: center;
					color: #ed6c00;
				}
			}

			.group {
				display: flex;
				padding: 0 0 10px;

				.item {
					flex: 1;
					position: relative;
					margin: 10rpx 20px;
					text-align: center;
				}

				h3 {
					line-height: 30px;
					font-size: 16px;
					background: -webkit-linear-gradient(left, #ff9300, #ffc300, #ff9300);
					color: #c8161d;
					border-radius: 10px 10px 0 0;
				}

				p {
					line-height: 30px;
					font-size: 16px;
					font-weight: bold;
					color: #ed6c00;
				}
			}
		}
	}

	.gongxian-box {
		position: relative;
		background: #ffffff;
		overflow: hidden;

		.flex {
			display: flex;
			text-align: center;

			.lt {
				flex: 1;
			}

			.lr {
				flex: 1;
			}
		}


		.thead {
			background: -webkit-linear-gradient(left, #ff9300, #ffc300, #ff9300);
			color: #c8161d;

			.flex {
				line-height: 35px;
				font-size: 16px;
				font-weight: bold;
			}
		}

		.tbody {
			position: relative;

			.flex {
				line-height: 50px;
				font-size: 16px;
				font-weight: bold;
				color: #ed6c00;
			}
		}
	}

	.details-box {
		position: relative;

		.details-box__thead {
			text-align: center;
			margin: 0 0 25px;

			.title {
				image {
					height: 30px;
				}
			}
		}

		.details-box__tbody {
			background: #ffffff;
			border-radius: 20px;

			.thead {
				display: flex;
				text-align: center;
				position: relative;
				top: -15px;
				padding: 0 20px;

				.lt {
					flex: 1;
				}

				.lr {
					flex: 1;

					.title {
						background: -webkit-linear-gradient(top, #faf4e4, #efdbc4);

						&::before,
						&::after {
							border-top-color: #cfb9a4;
						}
					}
				}

				.title {
					position: relative;
					background: -webkit-linear-gradient(top, #ffc300, #ff8c00);
					display: inline-block;
					width: 26vw;
					border-radius: 0 0 10px 10px;

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 0;
						width: 0;
						height: 0;
						border: 10px solid transparent;
						border-top-color: #ff6f00;
					}

					&::before {
						top: 5px;
						left: -10px;
						transform: rotate(-45deg);
					}

					&::after {
						top: 5px;
						right: -10px;
						transform: rotate(45deg);
					}

					span {
						position: relative;
						line-height: 30px;
						font-size: 14px;
						font-weight: bold;
						color: #c8161d;

					}
				}
			}

			.group {
				border-radius: 0 0 20px 20px;

				.item {
					display: flex;
					padding: 20rpx 20px;
					color: #000000;

					&:nth-child(odd) {
						background: #f5f5f5;
					}
				}

				.lt {
					display: flex;
					flex-direction: column;
					flex: 1;

					span {
						height: 30rpx;
						line-height: 30rpx;
						font-size: 24rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.lr {
					flex: 1;
					text-align: center;
					span {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 24rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>